<template>
  <a-form layout="horizontal" :form="form">
      <a-form-item label="付款账户" :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
      >
        <a-input v-decorator="['payAccount',{
            initialValue: step.payAccount,
            rules: [{required: true, message: '请输入付款账号'}]
        }]" placeholder="请输入付款账号" />

      </a-form-item>

       <a-form-item label="收款账户" :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
      >
        <ReceiverAccount v-decorator="['receiverAccount',{
            initialValue: step.receiverAccount,
            rules: [{required: true, message: '请输入收款账号',
                validator: (rule, value, callback) =>{
                    if(value && value.number){
                        callback();
                    }else {
                        callback(false);
                    }
                }}]
        }]"  />

      </a-form-item>
      <a-form-item>
          <a-button type="primary" @click="handleSumbit">下一步</a-button>
          <Logo />
          <!-- <IconFont type="icon-404" style="font-size: 100px"/> -->
      </a-form-item>
  </a-form>
</template>

<script>
import ReceiverAccount from '../../../components/ReceiverAccount.vue'
//import ReceiverAccount from '@/components/ReceiverAccount.vue'  @的作用是固定到src目录下
import Logo from '@/assets/bilibili.svg'
export default {
    components: {ReceiverAccount,Logo},
    data() {
        this.form = this.$form.createForm(this);
        return {
            formItemLayout: {
                labelCol: {span: 4},
                warapperCol: {span: 14}
            }
        };
    },
    computed: {
        step() {
            return this.$store.state.form.step;
        }
    },
    methods: {
        handleSumbit() {
            const {form, $router, $store} = this
            form.validateFields((err,values) => {
                if(!err) {
                    $store.commit({
                        type: "form/saveStepFormData",
                        payload: values
                    });
                    $router.push("/form/step-form/confirm");
                }
            })
        }
    }
}
</script>

<style>

</style>